<template>
  <div class="yard-details-table flex flex-column">
    <tabs-group v-model="tab" :data-list="radioList" @change="() => $refs.table.load()" class="flex-fixed" style='width: 100%'/>
    <a-form ref="form" layout="inline" style="margin: 20px" class="flex-fixed">
      <a-form-item>
        <a-input v-model:value="formData.name" placeholder="请输入姓名" allow-clear />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="search">查询</a-button>
        <a-button @click="reset">重置</a-button>
      </a-form-item>
    </a-form>
    <common-table
      ref="table"
      :show-toolbar="false"
      :fetch="getTableApi"
      :fetch-params="apiParams"
      :columns="columns"
      class="flex-auto-height"
    >
      <template #index="{ index }">
        <span>{{ index + 1 }}</span>
      </template>
      <template #head_img="{ text, scope }">
        <avatar :src="scope.head_img" style="width: 100%" />
      </template>
    </common-table>
  </div>
</template>

<script>
import CommonTable from '@gis/lib/components/vex-table/index.vue';
import TabsGroup from '@gis/lib/components/tabs-group.vue';
import Avatar from '@gis/lib/components/img-viewer/index.vue';
import { autonomousOrganizationMemberList, partyMemberList } from '@gis/lib/api';
import { getEnumText } from '@gis/lib/enums/index.js';

export default {
  name: 'yard-details-table',
  components: { Avatar, TabsGroup, CommonTable },
  props: {
    yardDetails: {
      type: Object,
      default: () => {},
    },
    yard_id: { type: String, default: '' },
  },
  data() {
    return {
      tab: '1',
      formData: {
        name: '',
      },
      radioList: [
        { label: '物业成员', value: '1' },
        { label: '业委会成员', value: '2' },
        { label: '党员', value: '3' },
        // { label: '居民小组长', value: '4' },
        // { label: '楼栋长', value: '5' },
        // { label: '兼职网格员', value: '6' },
        // { label: '红袖套', value: '7' },
      ],
      columns: [
        {
          title: '头像',
          dataIndex: 'head_img',
          scopedSlots: { customRender: 'head_img' },
          width: 60,
        },
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '性别',
          dataIndex: 'sex',
          customRender: (v) => getEnumText('gender', v),
        },
        {
          title: '职位',
          dataIndex: 'duty',
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
        },
      ],
    };
  },
  computed: {
    apiParams() {
      return Object.assign(
        {},
        {
          yard_id: this.yardDetails.yard_id,
          property_management_id:
            this.tab == '1' ? this.yardDetails.property_management_id : this.yardDetails.owners_committee_id,
          zz_type: this.tab == '1' ? 1 : this.tab == '2' ? 2 : '',
        },
        this.formData
      );
    },
  },
  watch: {
    yard_id: {
      immediate: true,
      handler(val) {
        if (!val) return;
        this.$nextTick(() => {
          this.search(); //初始化，有小区id再进行初始化
        });
      },
    },
  },
  methods: {
    async getTableApi(params) {
      const api = {
        1: autonomousOrganizationMemberList,
        2: autonomousOrganizationMemberList,
        3: partyMemberList,
        default: async () => {},
      };
      return this.handleTableResult(await (api[this.tab] || api.default)(params));
    },
    search() {
      this.$refs.table.load();
    },
    reset() {
      this.formData.name = '';
      this.$nextTick(() => {
        this.search();
      });
    },
  },
};
</script>

<style scoped lang="less">
.yard-details-table {
  color: #ffffff;
  width: 100%;
  height: 100%;
  /deep/ .avatar {
    width: 50px;
    height: 65px;
  }
  /deep/.ant-input {
    color: #ffffff;
  }
}
</style>
